        <include file="Public:top_frame" />
        <!-- /section:basics/navbar.layout -->
        <div class="main-container" id="main-container">
            <script type="text/javascript">
                try {ace.settings.check('main-container' ,'fixed')}catch(e){}
            </script>

            <include file="Public:left_frame" />

            <!-- /section:basics/sidebar -->
            <div class="main-content">
                <div class="main-content-inner">
                    <!-- #section:basics/content.breadcrumbs -->
                    <div class="breadcrumbs" id="breadcrumbs">
                        <script type="text/javascript">
                            try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
                        </script>

                        <ul class="breadcrumb">
                            <li>
                                <i class="ace-icon fa fa-home home-icon"></i>
                                <a href="{:U('/index/index')}">首页</a>
                            </li>
                            <li>
                                <a href="{:U('/user/index')}">用户管理</a>
                            </li>
                            <li class="active">添加用户信息</li>
                        </ul><!-- /.breadcrumb -->
                        <!-- /section:basics/content.searchbox -->
                    </div>

                    <!-- /section:basics/content.breadcrumbs -->
                    <div class="page-content">
                        <!-- #section:settings.box -->

                        <!-- /section:settings.box -->
                        <div class="page-header">
                            <h1>
                                添加用户信息
                            </h1>
                        </div><!-- /.page-header -->
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="widget-box">
                                    <!--<div class="widget-header widget-header-blue widget-header-flat">-->
                                        <!--<h4 class="widget-title lighter">填写个人资料</h4>-->
                                    <!--</div>-->
                                    <div class="widget-body">
                                        <div class="widget-main">
                                            <!-- #section:plugins/fuelux.wizard -->
                                            <div id="fuelux-wizard-container">
                                                <div class="step-content pos-rel">
                                                    <div class="step-pane active" data-step="1">
                                                        <form class="form-horizontal" id="validation-form" method="get">
                                                            <div class="form-group">
                                                                <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="account">用户名:</label>

                                                                <div class="col-xs-12 col-sm-9">
                                                                    <div class="clearfix">
                                                                        <input type="text" id="account" name="account" class="col-xs-12 col-sm-5"/>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="space-2"></div>

                                                            <div class="form-group">
                                                                <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="username">昵称:</label>

                                                                <div class="col-xs-12 col-sm-9">
                                                                    <div class="clearfix">
                                                                        <input type="text" id="username" name="username" class="col-xs-12 col-sm-5" />
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="space-2"></div>

                                                            <div class="form-group">
                                                                <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="email">邮箱:</label>
                                                                <div class="col-xs-12 col-sm-9">
                                                                    <div class="clearfix">
                                                                        <input type="email" name="email" id="email" class="col-xs-12 col-sm-6" />
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="space-2"></div>
                                                            <div class="form-group">
                                                                <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="telephone">手机号码:</label>
                                                                <div class="col-xs-12 col-sm-9">
                                                                    <div class="input-group">
                                                                        <span class="input-group-addon">
                                                                            <i class="ace-icon fa fa-phone"></i>
                                                                        </span>
                                                                        <input type="tel" id="telephone" name="telephone" />
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="telephone">角色:</label>
                                                                <div class="col-xs-12 col-sm-9" style="width: 10%;">
                                                                    <select class="form-control" id="role_id" name="role_id">
                                                                        <foreach name="role" item="ro">
                                                                            <option value="{$ro.id}">{$ro.name}</option>
                                                                        </foreach>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="space-2"></div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="clearfix form-actions">
                                                <div class="col-md-offset-3 col-md-9">
                                                    <button class="btn btn-info" type="button" id="user_submit">
                                                        <i class="ace-icon fa fa-check bigger-110"></i>
                                                        提交
                                                    </button>
                                                    &nbsp; &nbsp; &nbsp;
                                                    <button class="btn" type="reset" id="user_back">
                                                        <i class="ace-icon fa fa-undo bigger-110"></i>
                                                        返回
                                                    </button>
                                                </div>
                                            </div>
                                        </div><!-- /.widget-main -->
                                    </div><!-- /.widget-body -->
                                </div><!-- PAGE CONTENT ENDS -->
                            </div><!-- /.col -->
                        </div><!-- /.row -->
                    </div><!-- /.page-content -->
                </div>
            </div><!-- /.main-content -->
            <include file="Public:footer" />
        </div><!-- /.main-container -->
        <!-- basic scripts -->
        <!--[if !IE]> -->
        <script type="text/javascript">
            window.jQuery || document.write("<script src='__PUBLIC__/admin/assets/js/jquery.js'>"+"<"+"/script>");
        </script>
        <!-- <![endif]-->
        <!--[if IE]>
        <script type="text/javascript">
            window.jQuery || document.write("<script src='__PUBLIC__/admin/assets/js/jquery1x.js'>"+"<"+"/script>");
        </script>
        <![endif]-->
        <script type="text/javascript">
            if('ontouchstart' in document.documentElement) document.write("<script src='__PUBLIC__/admin/assets/js/jquery.mobile.custom.js'>"+"<"+"/script>");
        </script>
        <script src="__PUBLIC__/admin/assets/js/bootstrap.js"></script>

        <!-- page specific plugin scripts -->
        <script src="__PUBLIC__/admin/assets/js/fuelux/fuelux.wizard.js"></script>
        <script src="__PUBLIC__/admin/assets/js/jquery.validate.js"></script>
        <script src="__PUBLIC__/admin/assets/js/additional-methods.js"></script>
        <script src="__PUBLIC__/admin/assets/js/bootbox.js"></script>
        <script src="__PUBLIC__/admin/assets/js/jquery.maskedinput.js"></script>
        <script src="__PUBLIC__/admin/assets/js/select2.js"></script>

        <!-- ace scripts -->
        <script src="__PUBLIC__/admin/assets/js/ace/elements.scroller.js"></script>
        <script src="__PUBLIC__/admin/assets/js/ace/elements.colorpicker.js"></script>
        <script src="__PUBLIC__/admin/assets/js/ace/elements.fileinput.js"></script>
        <script src="__PUBLIC__/admin/assets/js/ace/elements.typeahead.js"></script>
        <script src="__PUBLIC__/admin/assets/js/ace/elements.wysiwyg.js"></script>
        <script src="__PUBLIC__/admin/assets/js/ace/elements.spinner.js"></script>
        <script src="__PUBLIC__/admin/assets/js/ace/elements.treeview.js"></script>
        <script src="__PUBLIC__/admin/assets/js/ace/elements.wizard.js"></script>
        <script src="__PUBLIC__/admin/assets/js/ace/elements.aside.js"></script>
        <script src="__PUBLIC__/admin/assets/js/ace/ace.js"></script>
        <script src="__PUBLIC__/admin/assets/js/ace/ace.ajax-content.js"></script>
        <script src="__PUBLIC__/admin/assets/js/ace/ace.touch-drag.js"></script>
        <script src="__PUBLIC__/admin/assets/js/ace/ace.sidebar.js"></script>
        <script src="__PUBLIC__/admin/assets/js/ace/ace.sidebar-scroll-1.js"></script>
        <script src="__PUBLIC__/admin/assets/js/ace/ace.submenu-hover.js"></script>
        <script src="__PUBLIC__/admin/assets/js/ace/ace.widget-box.js"></script>
        <script src="__PUBLIC__/admin/assets/js/ace/ace.settings.js"></script>
        <script src="__PUBLIC__/admin/assets/js/ace/ace.settings-rtl.js"></script>
        <script src="__PUBLIC__/admin/assets/js/ace/ace.settings-skin.js"></script>
        <script src="__PUBLIC__/admin/assets/js/ace/ace.widget-on-reload.js"></script>
        <script src="__PUBLIC__/admin/assets/js/ace/ace.searchbox-autocomplete.js"></script>

        <!-- inline scripts related to this page -->
        <script type="text/javascript">
            jQuery(function($) {

                $('.nav-list li').removeClass('open').removeClass('active');
                $('#left_7').addClass('open').addClass('active');
                $('#left_7_1').addClass('active');

                $('[data-rel=tooltip]').tooltip();
            
                $(".select2").css('width','200px').select2({allowClear:true})
                .on('change', function(){
                    $(this).closest('form').validate().element($(this));
                });

				$('#user_back').on('click', function() {
                    history.back();
				});
				
                $('#user_submit').on('click', function() {
                    if(!$('#validation-form').valid()) {
                        return;
                    }
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        data: $("#validation-form").serialize(),
                        async: true,
                        url: "__URL__/doAddUser",
                        success : function(data) {
                            if (data) {
                                if (data.code == 100) {
                                    alert('添加成功，初始密码为888888，请登录后自行修改');
                                    window.location.href = "{:U('user/index')}";
                                } else {
                                    alert(data.message);
                                    return;
                                }
                            } else {
                                alert("添加失败");
                            }
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            alert("网络异常");
                        }
                    });
                });
                
                //jump to a step
                /**
                var wizard = $('#fuelux-wizard-container').data('fu.wizard')
                wizard.currentStep = 3;
                wizard.setState();
                */

                // $.mask.definitions['~']='[+-]';
                // $('#phone').mask('(999) 999-9999');
            
                jQuery.validator.addMethod("telephone", function (value, element) {
                    // return this.optional(element) || /^\(\d{3}\) \d{3}\-\d{4}( x\d{1,6})?$/.test(value);
                    return this.optional(element) || /^1[3,5,7,8]{1}[0-9]{9}$/.test(value);
                }, "请输入有效的手机号码");
            
                $('#validation-form').validate({
                    errorElement: 'div',
                    errorClass: 'help-block',
                    focusInvalid: false,
                    ignore: "",
                    rules: {
                        email: {
                            required: true,
                            email:true
                        },
                        username: {
                            required: true
                        },
                        account: {
                            required: true
                        },
                        telephone: {
                            required: true,
                            telephone: 'required'
                        }
                    },

                    messages: {
                        email: {
                            required: "Please provide a valid email.",
                            email: "Please provide a valid email."
                        }
                    },
            
                    highlight: function (e) {
                        $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
                    },
            
                    success: function (e) {
                        $(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
                        $(e).remove();
                    },
            
                    errorPlacement: function (error, element) {
                        if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                            var controls = element.closest('div[class*="col-"]');
                            if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
                            else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                        }
                        else if(element.is('.select2')) {
                            error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                        }
                        else if(element.is('.chosen-select')) {
                            error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                        }
                        else error.insertAfter(element.parent());
                    },
            
                    submitHandler: function (form) {
                    },
                    invalidHandler: function (form) {
                    }
                });

                $('#modal-wizard-container').ace_wizard();
                $('#modal-wizard .wizard-actions .btn[data-dismiss=modal]').removeAttr('disabled');
                
                /**
                $('#date').datepicker({autoclose:true}).on('changeDate', function(ev) {
                    $(this).closest('form').validate().element($(this));
                });
                
                $('#mychosen').chosen().on('change', function(ev) {
                    $(this).closest('form').validate().element($(this));
                });
                */
                
                $(document).one('ajaxloadstart.page', function(e) {
                    //in ajax mode, remove remaining elements before leaving page
                    $('[class*=select2]').remove();
                });
            });
        </script>
    </body>
</html>